<template>
	<div class="set">
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>设置</div>
			<div></div>
		</header>
		
		<div class="content">
			<div class="content_d" @click="personaldata">
				<div >
					<img src="../assets/set/presonaldata.png" class="presonaldata">
					个人资料
				</div>
				<div>
					<img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows">
				</div>
			</div>
			<div class="content_d" @click="site">
				<div>
					<img src="../assets/set/site.png" class="site">
					收货地址
				</div>
				<div >
					新建/修改
					<img src="../assets/images1/btn_icon_lift_9@2x.png" class="rightArrows">
				</div>
			</div>
		</div>
		
		<div class="content">
			<div class="quit" @click="quit">退出</div>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				token:'',
				Loading:false,
			}
		},
		created(){
			this.token = localStorage.getItem('token')
		},
		methods:{
			//导航退后
			retreat:function(){
//				window.history.go(-1);
				this.$router.push({
					path:'/personalContent'
				})
			},
			//退出
			quit:function(){
				this.Loading = true;
				var url = BaseUrl + 'login/out?token=' + this.token + '&appId=wap';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						this.Loading = false;
						localStorage.removeItem('token');
						this.$router.push({
							path:'/personalContent'
						})
					}
				}).catch(error=>{
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			//个人资料
			personaldata:function(){
				this.$router.push({
					path:'/personal'
				})
			},
			//地址
			site:function(){
				this.$router.push({
					path:'/receaddress?page=page'
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 99;
		
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.content{
		border-top: 0.16rem solid #f2f2f2;
		background: #FFF;
		padding: 0 0.25rem;
	}
	.content_d{
		padding: 0.3rem 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #cccccc;
		color: #323232;
		font-size: 0.26rem;
		letter-spacing: 0.02rem;
	}
	.presonaldata{
		width: 0.37rem;
		height: 0.28rem;
		margin-right: 0.1rem;
	}
	.site{
		width: 0.23rem;
		height: 0.29rem;
		margin-right: 0.25rem;
	}
	.content_d div:nth-child(2){
		display: flex;
		align-items: center;
	}
	.content_d div:nth-child(2) img{
		width: 0.5rem;
		height: 0.4rem;
	}
	
	.quit{
		background: #ff2040;
		font-size: 0.26rem;
		text-align: center;
		padding: 0.2rem 0;
		color: #fff;
		border-radius: 0.5rem;
		margin-top: 0.5rem;
	}
</style>